<template lang="html">
  <section class="components-personal-header">
    <div class="UserPage_usermodule">
      <div class="UserPage_usermodule_photo">
        <progressive-img :src="userInfo.headimgurl" alt=""/>
      </div>
      <div class="UserPage_usermodule_cover"></div>
      <div class="UserPage_usermodule_userinfo">
        <div class="UserPage_usermodule_userinfo_username">
          <h2>{{userInfo.nickname}}</h2>
          <span v-if="!isCoach">(会员)</span>
          <span v-else>(教练)</span>

          <!-- <button type="button" class="userInfo-scanCode" v-if="isCoach" @click="$emit('scanQRCode')">
            教练扫码
          </button> -->
        </div>
        <template v-if="!isCoach">
          <div class="UserPage_usermodule_userinfo_usertreasure" @click="$router.push({ path: '/property' })">
            <p>我的财富</p>
            <p>查看</p>
            <i class="ic-arrow_right"></i>
          </div>
        </template>
        <template v-else>
          <div class="UserPage_usermodule_userinfo_usertreasure" @click="$emit('scanQRCode')">
            <p>教练扫码签到</p>
            <p>打开扫码</p>
            <i class="ic-arrow_right"></i>
          </div>
        </template>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    userInfo:{
      type: Object,
      required: true
    },
    memberInfo:{
      type: Object,
      required: true
    },
    isCoach: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
.components-personal-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  $info-height: 145px;
  $avatar-size: 152px;
  .UserPage_usermodule{
    width: 100%;
    height: 428px ;
    padding-top: 428px-$info-height;
    box-sizing: border-box;
    background: url("http://opmju0pmq.bkt.clouddn.com/zp-personal-header-2.png");
    background-size: cover;
    background-position: 0 -70px;
    position: relative;
    .UserPage_usermodule_photo{
      height: $avatar-size;
      line-height: $avatar-size;
      width: $avatar-size;
      position: absolute;
      left: 39px;
      top: 428px-$info-height - $avatar-size/4*3;
      z-index: 3;
      border: 5px solid #fff;
      border-radius: 100%;
      overflow: hidden;
      vertical-align: middle;
      img{
        display: inline-block;
        vertical-align: middle;
        width: 100%;
      }
    }
    .UserPage_usermodule_cover{
      height: $info-height;
      width: 100%;
      background: #f1f1f6;
      opacity: .8;
      }
    .UserPage_usermodule_userinfo{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: $info-height;
      .UserPage_usermodule_userinfo_username{
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 18px 0 18px 224px;
        box-sizing: border-box;
        .userInfo-scanCode{
          position: absolute;
          top: 50%;
          right: 50px;
          transform: translateY(-50%);
          width: 145px;
          height: 42px;
          line-height: 42px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          border-radius: 20px;
          background-color: $common-red;
          color: #fff;
          &:active{
            color: $active-font;
            background-color: $active-bg;
          }
        }
        h2{
          font-size: 36px;
          font-weight: bolder;
        }
        span{
          font-size: 24px;
          font-weight: bolder;
          margin-left: 18px;
        }
      }
    .UserPage_usermodule_userinfo_usercount{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        padding-bottom:18px ;
        margin-top: 20px;
        p{
          text-indent: 39px;
          font-size: 24px;
          .UserPage_usermodule_userinfo_usercount_point{
            font-size: 48px;
            font-weight: bolder;
            line-height: 30px;
          }
        }
      }
    .UserPage_usermodule_userinfo_usertreasure{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 30px 105px 0 39px;
        border-top: 2px solid #8d8888;
        .ic-arrow_right{
          position: absolute;
          display: inline-block;
          top: 50%;
          margin-top: -5px;
          right: 58px;
          font-size: 35px;
          color: #000;
        }
      }
     }
    }
}
</style>
